<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行业务系统</title>
    <style>
        /* 全局样式 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .hidden {
            display: none !important;
        }
        
        /* 登录页面样式 */
        #login-page {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .login-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            width: 400px;
            padding: 30px;
            text-align: center;
        }
        
        .logo {
            width: 100px;
            margin-bottom: 20px;
        }
        
        .login-title {
            color: #2c3e50;
            margin-bottom: 30px;
            font-size: 24px;
        }
        
        .role-selector {
            display: flex;
            margin-bottom: 20px;
            border-radius: 5px;
            overflow: hidden;
            border: 1px solid #3498db;
        }
        
        .role-option {
            flex: 1;
            padding: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .role-option.active {
            background-color: #3498db;
            color: white;
        }
        
        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-top: 10px;
        }
        
        .btn-sm {
            padding: 5px 10px;
            font-size: 14px;
            width: auto;
        }
        
        .btn-primary {
            background-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-danger {
            background-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .btn-success {
            background-color: #27ae60;
        }
        
        .btn-success:hover {
            background-color: #219653;
        }
        
        .forgot-password {
            margin-top: 15px;
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .forgot-password a {
            color: #3498db;
            text-decoration: none;
        }
        
        .error-message {
            color: #e74c3c;
            margin-top: 10px;
            font-size: 14px;
        }
        
        .success-message {
            color: #27ae60;
            margin-top: 10px;
            font-size: 14px;
        }
        
        /* 仪表盘公共样式 */
        .dashboard {
            display: flex;
            min-height: 100vh;
        }
        
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding: 20px;
        }
        
        .main-content {
            flex: 1;
            padding: 20px;
            background-color: #f9f9f9;
            overflow-y: auto;
        }
        
        .user-info {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: white;
            margin: 0 auto 10px;
        }
        
        .nav-menu {
            list-style: none;
            padding: 0;
        }
        
        .nav-menu li {
            margin-bottom: 10px;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            display: block;
            padding: 10px;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .nav-menu a:hover, .nav-menu a.active {
            background-color: #3498db;
        }
        
        .card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        .form-row {
            display: flex;
            margin-bottom: 15px;
        }
        
        .form-group {
            flex: 1;
            margin-right: 15px;
        }
        
        .form-group:last-child {
            margin-right: 0;
        }
        
        /* 客户仪表盘特定样式 */
        #customer-dashboard .user-avatar {
            background-color: #3498db;
        }
        
        #customer-dashboard .nav-menu a:hover, 
        #customer-dashboard .nav-menu a.active {
            background-color: #3498db;
        }
        
        .account-summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .account-card {
            width: 30%;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            background-color: #f1f1f1;
        }
        
        .account-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        
        .account-card .balance {
            font-size: 24px;
            font-weight: bold;
            color: #27ae60;
        }
        
        .quick-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .action-btn {
            width: 23%;
            padding: 15px;
            text-align: center;
            background-color: #3498db;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .action-btn:hover {
            background-color: #2980b9;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        th {
            background-color: #f2f2f2;
        }
        
        .credit {
            color: #27ae60;
        }
        
        .debit {
            color: #e74c3c;
        }
        
        /* 管理员仪表盘特定样式 */
        #admin-dashboard .user-avatar {
            background-color: #e74c3c;
        }
        
        #admin-dashboard .nav-menu a:hover, 
        #admin-dashboard .nav-menu a.active {
            background-color: #e74c3c;
        }
        
        .stats-summary {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .stat-card {
            width: 23%;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            background-color: #f1f1f1;
        }
        
        .stat-card h3 {
            margin-top: 0;
            color: #2c3e50;
        }
        
        .stat-card .value {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
        }
        
        #admin-dashboard .action-btn {
            background-color: #e74c3c;
        }
        
        #admin-dashboard .action-btn:hover {
            background-color: #c0392b;
        }
        
        .search-bar {
            display: flex;
            margin-bottom: 20px;
        }
        
        .search-bar input {
            flex: 1;
            margin-right: 10px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .pagination button {
            margin: 0 5px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="login-page">
        <div class="login-container">
            <div class="logo">🏦</div>
            <h1 class="login-title">银行业务系统登录</h1>
            
            <div class="role-selector">
                <div class="role-option active" onclick="selectRole('customer')">客户登录</div>
                <div class="role-option" onclick="selectRole('admin')">管理员登录</div>
            </div>
            
            <form id="loginForm">
                <div class="input-group">
                    <label for="username" id="usernameLabel">银行卡号</label>
                    <input type="text" id="username" placeholder="请输入16位银行卡号" maxlength="16">
                </div>
                
                <div class="input-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" placeholder="请输入6位数字密码" maxlength="6">
                </div>
                
                <div id="errorMessage" class="error-message"></div>
                
                <button type="button" class="btn btn-primary" onclick="validateForm()">登录</button>
            </form>
            
            <div class="forgot-password">
                <a href="#" onclick="forgotPassword()">忘记密码?</a>
            </div>
        </div>
    </div>
    
    <!-- 客户仪表盘 -->
    <div id="customer-dashboard" class="dashboard hidden">
        <div class="sidebar">
            <div class="user-info">
                <div class="user-avatar">张</div>
                <h3>张三</h3>
                <p>卡号: 1010357612345678</p>
            </div>
            
            <ul class="nav-menu">
                <li><a href="#" class="active" onclick="showCustomerSection('overview')">账户概览</a></li>
                <li><a href="#" onclick="showCustomerSection('deposit')">存款</a></li>
                <li><a href="#" onclick="showCustomerSection('withdraw')">取款</a></li>
                <li><a href="#" onclick="showCustomerSection('transfer')">转账</a></li>
                <li><a href="#" onclick="showCustomerSection('records')">交易记录</a></li>
                <li><a href="#" onclick="showCustomerSection('settings')">账户管理</a></li>
                <li><a href="#" onclick="logout()">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <!-- 账户概览 -->
            <div id="customer-overview" class="customer-section">
                <h2>账户概览</h2>
                
                <div class="account-summary">
                    <div class="account-card">
                        <h3>活期账户</h3>
                        <p class="balance">¥12,345.67</p>
                        <p>可用余额</p>
                    </div>
                    
                    <div class="account-card">
                        <h3>定期账户</h3>
                        <p class="balance">¥50,000.00</p>
                        <p>到期日: 2025-12-31</p>
                    </div>
                    
                    <div class="account-card">
                        <h3>信用卡</h3>
                        <p class="balance">-¥3,245.00</p>
                        <p>还款日: 2025-06-25</p>
                    </div>
                </div>
                
                <div class="quick-actions">
                    <div class="action-btn" onclick="showCustomerSection('deposit')">
                        <p>存款</p>
                    </div>
                    
                    <div class="action-btn" onclick="showCustomerSection('withdraw')">
                        <p>取款</p>
                    </div>
                    
                    <div class="action-btn" onclick="showCustomerSection('transfer')">
                        <p>转账</p>
                    </div>
                    
                    <div class="action-btn" onclick="showCustomerSection('records')">
                        <p>交易记录</p>
                    </div>
                </div>
                
                <div class="card">
                    <h3>最近交易</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>描述</th>
                                <th>金额</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2025-06-15</td>
                                <td>工资收入</td>
                                <td class="credit">+¥8,500.00</td>
                                <td>已完成</td>
                            </tr>
                            <tr>
                                <td>2025-06-12</td>
                                <td>超市购物</td>
                                <td class="debit">-¥256.30</td>
                                <td>已完成</td>
                            </tr>
                            <tr>
                                <td>2025-06-10</td>
                                <td>水电费缴纳</td>
                                <td class="debit">-¥385.50</td>
                                <td>已完成</td>
                            </tr>
                            <tr>
                                <td>2025-06-05</td>
                                <td>朋友转账</td>
                                <td class="credit">+¥1,200.00</td>
                                <td>已完成</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 存款页面 -->
            <div id="customer-deposit" class="customer-section hidden">
                <h2>存款</h2>
                <div class="card">
                    <div class="input-group">
                        <label for="deposit-amount">存款金额</label>
                        <input type="number" id="deposit-amount" placeholder="请输入存款金额">
                    </div>
                    <div class="input-group">
                        <label for="deposit-account">存入账户</label>
                        <select id="deposit-account" class="form-control">
                            <option value="1010357612345678">活期账户 (1010357612345678)</option>
                            <option value="1010357656781234">定期账户 (1010357656781234)</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" onclick="customerDeposit()">确认存款</button>
                    <div id="deposit-message" class="success-message"></div>
                </div>
            </div>
            
            <!-- 取款页面 -->
            <div id="customer-withdraw" class="customer-section hidden">
                <h2>取款</h2>
                <div class="card">
                    <div class="input-group">
                        <label for="withdraw-amount">取款金额</label>
                        <input type="number" id="withdraw-amount" placeholder="请输入取款金额">
                    </div>
                    <div class="input-group">
                        <label for="withdraw-account">从账户</label>
                        <select id="withdraw-account" class="form-control">
                            <option value="1010357612345678">活期账户 (1010357612345678)</option>
                            <option value="1010357656781234">定期账户 (1010357656781234)</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="withdraw-password">取款密码</label>
                        <input type="password" id="withdraw-password" placeholder="请输入6位取款密码" maxlength="6">
                    </div>
                    <button class="btn btn-primary" onclick="customerWithdraw()">确认取款</button>
                    <div id="withdraw-message" class="error-message"></div>
                </div>
            </div>
            
            <!-- 转账页面 -->
            <div id="customer-transfer" class="customer-section hidden">
                <h2>转账</h2>
                <div class="card">
                    <div class="input-group">
                        <label for="transfer-from">转出账户</label>
                        <select id="transfer-from" class="form-control">
                            <option value="1010357612345678">活期账户 (1010357612345678)</option>
                            <option value="1010357656781234">定期账户 (1010357656781234)</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="transfer-to">转入账户卡号</label>
                        <input type="text" id="transfer-to" placeholder="请输入对方16位银行卡号">
                    </div>
                    <div class="input-group">
                        <label for="transfer-amount">转账金额</label>
                        <input type="number" id="transfer-amount" placeholder="请输入转账金额">
                    </div>
                    <div class="input-group">
                        <label for="transfer-password">取款密码</label>
                        <input type="password" id="transfer-password" placeholder="请输入6位取款密码" maxlength="6">
                    </div>
                    <button class="btn btn-primary" onclick="customerTransfer()">确认转账</button>
                    <div id="transfer-message" class="error-message"></div>
                </div>
            </div>
            
            <!-- 交易记录页面 -->
            <div id="customer-records" class="customer-section hidden">
                <h2>交易记录</h2>
                <div class="card">
                    <div class="search-bar">
                        <input type="text" id="record-search" placeholder="搜索交易记录...">
                        <button class="btn btn-primary btn-sm" onclick="searchRecords()">搜索</button>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="record-start-date">开始日期</label>
                            <input type="date" id="record-start-date">
                        </div>
                        <div class="form-group">
                            <label for="record-end-date">结束日期</label>
                            <input type="date" id="record-end-date">
                        </div>
                        <div class="form-group">
                            <label for="record-type">交易类型</label>
                            <select id="record-type">
                                <option value="all">全部</option>
                                <option value="deposit">存款</option>
                                <option value="withdraw">取款</option>
                                <option value="transfer">转账</option>
                            </select>
                        </div>
                    </div>
                    <button class="btn btn-primary" onclick="filterRecords()">筛选</button>
                    <button class="btn btn-success" onclick="exportRecordsToCSV()">导出CSV</button>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>交易日期</th>
                                <th>交易类型</th>
                                <th>金额</th>
                                <th>对方账户</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody id="records-list">
                            <tr>
                                <td>2025-06-15 14:30</td>
                                <td>存款</td>
                                <td class="credit">+¥8,500.00</td>
                                <td>-</td>
                                <td>工资收入</td>
                            </tr>
                            <tr>
                                <td>2025-06-12 18:45</td>
                                <td>取款</td>
                                <td class="debit">-¥256.30</td>
                                <td>-</td>
                                <td>超市购物</td>
                            </tr>
                            <tr>
                                <td>2025-06-10 09:20</td>
                                <td>转账</td>
                                <td class="debit">-¥1,200.00</td>
                                <td>1010357698765432</td>
                                <td>朋友还款</td>
                            </tr>
                            <tr>
                                <td>2025-06-05 11:15</td>
                                <td>转账</td>
                                <td class="credit">+¥1,200.00</td>
                                <td>1010357654321890</td>
                                <td>朋友借款</td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="pagination">
                        <button class="btn btn-sm" onclick="prevRecordsPage()">上一页</button>
                        <span>第 1 页</span>
                        <button class="btn btn-sm" onclick="nextRecordsPage()">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 账户管理页面 -->
            <div id="customer-settings" class="customer-section hidden">
                <h2>账户管理</h2>
                <div class="card">
                    <h3>修改密码</h3>
                    <div class="input-group">
                        <label for="current-password">当前密码</label>
                        <input type="password" id="current-password" placeholder="请输入当前密码">
                    </div>
                    <div class="input-group">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" placeholder="请输入6位新密码">
                    </div>
                    <div class="input-group">
                        <label for="confirm-password">确认新密码</label>
                        <input type="password" id="confirm-password" placeholder="请再次输入新密码">
                    </div>
                    <button class="btn btn-primary" onclick="changePassword()">修改密码</button>
                    <div id="password-message" class="error-message"></div>
                    
                    <h3 style="margin-top: 30px;">挂失银行卡</h3>
                    <div class="input-group">
                        <label for="report-card">选择银行卡</label>
                        <select id="report-card" class="form-control">
                            <option value="1010357612345678">活期账户 (1010357612345678)</option>
                            <option value="1010357656781234">定期账户 (1010357656781234)</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label for="report-reason">挂失原因</label>
                        <select id="report-reason" class="form-control">
                            <option value="lost">卡片遗失</option>
                            <option value="stolen">卡片被盗</option>
                            <option value="damaged">卡片损坏</option>
                        </select>
                    </div>
                    <button class="btn btn-danger" onclick="reportCardLoss()">确认挂失</button>
                    <div id="report-message" class="error-message"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 管理员仪表盘 -->
    <div id="admin-dashboard" class="dashboard hidden">
        <div class="sidebar">
            <div class="user-info">
                <div class="user-avatar">管</div>
                <h3>管理员</h3>
                <p>系统管理员</p>
            </div>
            
            <ul class="nav-menu">
                <li><a href="#" class="active" onclick="showAdminSection('dashboard')">控制面板</a></li>
                <li><a href="#" onclick="showAdminSection('customers')">客户管理</a></li>
                <li><a href="#" onclick="showAdminSection('cards')">银行卡管理</a></li>
                <li><a href="#" onclick="showAdminSection('deposits')">存款业务管理</a></li>
                <li><a href="#" onclick="showAdminSection('transactions')">交易管理</a></li>
                <li><a href="#" onclick="logout()">退出登录</a></li>
            </ul>
        </div>
        
        <div class="main-content">
            <!-- 管理员控制面板 -->
            <div id="admin-dashboard-section" class="admin-section">
                <h2>控制面板</h2>
                
                <div class="stats-summary">
                    <div class="stat-card">
                        <h3>总客户数</h3>
                        <p class="value">1,245</p>
                        <p>较上月 +2.5%</p>
                    </div>
                    
                    <div class="stat-card">
                        <h3>活跃账户</h3>
                        <p class="value">3,678</p>
                        <p>较上月 +1.8%</p>
                    </div>
                    
                    <div class="stat-card">
                        <h3>今日交易</h3>
                        <p class="value">¥2,345,678</p>
                        <p>较昨日 +5.2%</p>
                    </div>
                    
                    <div class="stat-card">
                        <h3>待处理</h3>
                        <p class="value">12</p>
                        <p>挂失申请</p>
                    </div>
                </div>
                
                <div class="quick-actions">
                    <div class="action-btn" onclick="showAdminSection('customers')">
                        <p>添加客户</p>
                    </div>
                    
                    <div class="action-btn" onclick="showAdminSection('cards')">
                        <p>银行卡管理</p>
                    </div>
                    
                    <div class="action-btn" onclick="showAdminSection('transactions')">
                        <p>交易查询</p>
                    </div>
                    
                    <div class="action-btn" onclick="exportDashboardData()">
                        <p>生成报表</p>
                    </div>
                </div>
                
                <div class="card">
                    <h3>最近活动</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>操作员</th>
                                <th>活动</th>
                                <th>详情</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>2025-06-15 14:30</td>
                                <td>管理员1</td>
                                <td>客户开户</td>
                                <td>客户ID: C100245</td>
                            </tr>
                            <tr>
                                <td>2025-06-15 13:45</td>
                                <td>管理员2</td>
                                <td>银行卡挂失</td>
                                <td>卡号: 1010357612345678</td>
                            </tr>
                            <tr>
                                <td>2025-06-15 11:20</td>
                                <td>管理员1</td>
                                <td>大额转账审核</td>
                                <td>金额: ¥50,000.00</td>
                            </tr>
                            <tr>
                                <td>2025-06-15 09:15</td>
                                <td>管理员3</td>
                                <td>系统维护</td>
                                <td>数据库备份</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 客户管理 -->
            <div id="admin-customers" class="admin-section hidden">
                <h2>客户管理</h2>
                <div class="card">
                    <div class="search-bar">
                        <input type="text" id="customer-search" placeholder="搜索客户姓名或ID">
                        <button class="btn btn-primary btn-sm" onclick="searchCustomers()">搜索</button>
                    </div>
                    
                    <button class="btn btn-primary" onclick="showAddCustomerForm()" style="margin-bottom: 20px;">添加新客户</button>
                    <button class="btn btn-success" onclick="exportCustomersToCSV()" style="margin-bottom: 20px;">导出CSV</button>
                    
                    <!-- 添加客户表单 -->
                    <div id="add-customer-form" class="hidden" style="margin-bottom: 20px;">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="new-customer-name">客户姓名</label>
                                <input type="text" id="new-customer-name" placeholder="请输入客户姓名">
                            </div>
                            <div class="form-group">
                                <label for="new-customer-pid">身份证号</label>
                                <input type="text" id="new-customer-pid" placeholder="请输入身份证号">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="new-customer-phone">联系电话</label>
                                <input type="text" id="new-customer-phone" placeholder="请输入联系电话">
                            </div>
                            <div class="form-group">
                                <label for="new-customer-address">联系地址</label>
                                <input type="text" id="new-customer-address" placeholder="请输入联系地址">
                            </div>
                        </div>
                        <button class="btn btn-primary" onclick="addCustomer()">确认添加</button>
                        <button class="btn btn-danger" onclick="cancelAddCustomer()">取消</button>
                        <div id="add-customer-message" class="error-message"></div>
                    </div>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>客户ID</th>
                                <th>姓名</th>
                                <th>身份证号</th>
                                <th>联系电话</th>
                                <th>联系地址</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="customers-list">
                            <tr>
                                <td>C10001</td>
                                <td>张三</td>
                                <td>210***************</td>
                                <td>138****1234</td>
                                <td>北京市海淀区</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editCustomer('C10001')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteCustomer('C10001')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>C10002</td>
                                <td>李四</td>
                                <td>210***************</td>
                                <td>139****5678</td>
                                <td>上海市浦东新区</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editCustomer('C10002')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteCustomer('C10002')">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="pagination">
                        <button class="btn btn-sm" onclick="prevCustomersPage()">上一页</button>
                        <span>第 1 页</span>
                        <button class="btn btn-sm" onclick="nextCustomersPage()">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 银行卡管理 -->
            <div id="admin-cards" class="admin-section hidden">
                <h2>银行卡管理</h2>
                <div class="card">
                    <div class="search-bar">
                        <input type="text" id="card-search" placeholder="搜索卡号或客户ID">
                        <button class="btn btn-primary btn-sm" onclick="searchCards()">搜索</button>
                    </div>
                    
                    <button class="btn btn-primary" onclick="showAddCardForm()" style="margin-bottom: 20px;">添加新银行卡</button>
                    <button class="btn btn-success" onclick="exportCardsToCSV()" style="margin-bottom: 20px;">导出CSV</button>
                    
                    <!-- 添加银行卡表单 -->
                    <div id="add-card-form" class="hidden" style="margin-bottom: 20px;">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="new-card-customer">客户ID</label>
                                <input type="text" id="new-card-customer" placeholder="请输入客户ID">
                            </div>
                            <div class="form-group">
                                <label for="new-card-type">存款类型</label>
                                <select id="new-card-type">
                                    <option value="1">活期</option>
                                    <option value="2">定活两便</option>
                                    <option value="3">整存整取</option>
                                    <option value="4">零存整取</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label for="new-card-amount">开户金额</label>
                                <input type="number" id="new-card-amount" placeholder="请输入开户金额">
                            </div>
                            <div class="form-group">
                                <label for="new-card-currency">币种</label>
                                <select id="new-card-currency">
                                    <option value="RMB">人民币</option>
                                    <option value="USD">美元</option>
                                    <option value="EUR">欧元</option>
                                </select>
                            </div>
                        </div>
                        <button class="btn btn-primary" onclick="addCard()">确认添加</button>
                        <button class="btn btn-danger" onclick="cancelAddCard()">取消</button>
                        <div id="add-card-message" class="error-message"></div>
                    </div>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>卡号</th>
                                <th>客户ID</th>
                                <th>客户姓名</th>
                                <th>存款类型</th>
                                <th>余额</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="cards-list">
                            <tr>
                                <td>1010357612345678</td>
                                <td>C10001</td>
                                <td>张三</td>
                                <td>活期</td>
                                <td>¥12,345.67</td>
                                <td>正常</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editCard('1010357612345678')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteCard('1010357612345678')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1010357656781234</td>
                                <td>C10001</td>
                                <td>张三</td>
                                <td>整存整取</td>
                                <td>¥50,000.00</td>
                                <td>正常</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editCard('1010357656781234')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteCard('1010357656781234')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>1010357698765432</td>
                                <td>C10002</td>
                                <td>李四</td>
                                <td>活期</td>
                                <td>¥8,765.43</td>
                                <td>挂失</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editCard('1010357698765432')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteCard('1010357698765432')">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="pagination">
                        <button class="btn btn-sm" onclick="prevCardsPage()">上一页</button>
                        <span>第 1 页</span>
                        <button class="btn btn-sm" onclick="nextCardsPage()">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 存款业务管理 -->
            <div id="admin-deposits" class="admin-section hidden">
                <h2>存款业务管理</h2>
                <div class="card">
                    <div class="search-bar">
                        <input type="text" id="deposit-search" placeholder="搜索业务名称或编号">
                        <button class="btn btn-primary btn-sm" onclick="searchDeposits()">搜索</button>
                    </div>
                    
                    <button class="btn btn-primary" onclick="showAddDepositForm()" style="margin-bottom: 20px;">添加新存款业务</button>
                    <button class="btn btn-success" onclick="exportDepositsToCSV()" style="margin-bottom: 20px;">导出CSV</button>
                    
                    <!-- 添加存款业务表单 -->
                    <div id="add-deposit-form" class="hidden" style="margin-bottom: 20px;">
                        <div class="form-row">
                            <div class="form-group">
                                <label for="new-deposit-name">业务名称</label>
                                <input type="text" id="new-deposit-name" placeholder="请输入业务名称">
                            </div>
                            <div class="form-group">
                                <label for="new-deposit-id">业务编号</label>
                                <input type="text" id="new-deposit-id" placeholder="请输入业务编号">
                            </div>
                        </div>
                        <div class="input-group">
                            <label for="new-deposit-desc">业务描述</label>
                            <input type="text" id="new-deposit-desc" placeholder="请输入业务描述">
                        </div>
                        <button class="btn btn-primary" onclick="addDeposit()">确认添加</button>
                        <button class="btn btn-danger" onclick="cancelAddDeposit()">取消</button>
                        <div id="add-deposit-message" class="error-message"></div>
                    </div>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>业务编号</th>
                                <th>业务名称</th>
                                <th>业务描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="deposits-list">
                            <tr>
                                <td>1</td>
                                <td>活期</td>
                                <td>无固定存期，可随时存取，存取金额不限</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editDeposit('1')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteDeposit('1')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>定活两便</td>
                                <td>事先不约定存期，一次性存入，一次性支取</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editDeposit('2')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteDeposit('2')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>整存整取</td>
                                <td>选择存款期限，整笔存入，到期提取本息</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editDeposit('3')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteDeposit('3')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>零存整取</td>
                                <td>逐月按约定金额存入，到期支取本息</td>
                                <td>
                                    <button class="btn btn-primary btn-sm" onclick="editDeposit('4')">编辑</button>
                                    <button class="btn btn-danger btn-sm" onclick="deleteDeposit('4')">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="pagination">
                        <button class="btn btn-sm" onclick="prevDepositsPage()">上一页</button>
                        <span>第 1 页</span>
                        <button class="btn btn-sm" onclick="nextDepositsPage()">下一页</button>
                    </div>
                </div>
            </div>
            
            <!-- 交易管理 -->
            <div id="admin-transactions" class="admin-section hidden">
                <h2>交易管理</h2>
                <div class="card">
                    <div class="search-bar">
                        <input type="text" id="transaction-search" placeholder="搜索卡号或交易类型">
                        <button class="btn btn-primary btn-sm" onclick="searchTransactions()">搜索</button>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="transaction-start-date">开始日期</label>
                            <input type="date" id="transaction-start-date">
                        </div>
                        <div class="form-group">
                            <label for="transaction-end-date">结束日期</label>
                            <input type="date" id="transaction-end-date">
                        </div>
                        <div class="form-group">
                            <label for="transaction-type">交易类型</label>
                            <select id="transaction-type">
                                <option value="all">全部</option>
                                <option value="deposit">存款</option>
                                <option value="withdraw">取款</option>
                                <option value="transfer">转账</option>
                            </select>
                        </div>
                    </div>
                    <button class="btn btn-primary" onclick="filterTransactions()">筛选</button>
                    <button class="btn btn-success" onclick="exportTransactionsToCSV()">导出CSV</button>
                    
                    <table>
                        <thead>
                            <tr>
                                <th>交易ID</th>
                                <th>交易时间</th>
                                <th>卡号</th>
                                <th>交易类型</th>
                                <th>金额</th>
                                <th>对方账户</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="transactions-list">
                            <tr>
                                <td>T10001</td>
                                <td>2025-06-15 14:30:25</td>
                                <td>1010357612345678</td>
                                <td>存款</td>
                                <td class="credit">+¥8,500.00</td>
                                <td>-</td>
                                <td>工资收入</td>
                                <td>
                                    <button class="btn btn-danger btn-sm" onclick="deleteTransaction('T10001')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>T10002</td>
                                <td>2025-06-12 18:45:12</td>
                                <td>1010357612345678</td>
                                <td>取款</td>
                                <td class="debit">-¥256.30</td>
                                <td>-</td>
                                <td>超市购物</td>
                                <td>
                                    <button class="btn btn-danger btn-sm" onclick="deleteTransaction('T10002')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>T10003</td>
                                <td>2025-06-10 09:20:33</td>
                                <td>1010357612345678</td>
                                <td>转账</td>
                                <td class="debit">-¥1,200.00</td>
                                <td>1010357698765432</td>
                                <td>朋友还款</td>
                                <td>
                                    <button class="btn btn-danger btn-sm" onclick="deleteTransaction('T10003')">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>T10004</td>
                                <td>2025-06-05 11:15:47</td>
                                <td>1010357654321890</td>
                                <td>转账</td>
                                <td class="credit">+¥1,200.00</td>
                                <td>1010357612345678</td>
                                <td>朋友借款</td>
                                <td>
                                    <button class="btn btn-danger btn-sm" onclick="deleteTransaction('T10004')">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="pagination">
                        <button class="btn btn-sm" onclick="prevTransactionsPage()">上一页</button>
                        <span>第 1 页</span>
                        <button class="btn btn-sm" onclick="nextTransactionsPage()">下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 当前选择的角色
        let currentRole = 'customer';
        
        // 选择角色
        function selectRole(role) {
            currentRole = role;
            const options = document.querySelectorAll('.role-option');
            options.forEach(option => {
                if (option.textContent.toLowerCase().includes(role)) {
                    option.classList.add('active');
                } else {
                    option.classList.remove('active');
                }
            });
            
            // 更新用户名标签
            const usernameLabel = document.getElementById('usernameLabel');
            if (role === 'customer') {
                usernameLabel.textContent = '银行卡号';
                document.getElementById('username').placeholder = '请输入16位银行卡号';
            } else {
                usernameLabel.textContent = '管理员账号';
                document.getElementById('username').placeholder = '请输入管理员账号';
            }
        }
        
        // 表单验证
        function validateForm() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const errorMessage = document.getElementById('errorMessage');
            
            errorMessage.textContent = '';
            
            if (currentRole === 'customer') {
                // 验证银行卡号
                if (!/^10103576\d{8}$/.test(username)) {
                    errorMessage.textContent = '银行卡号格式不正确，前8位应为10103576';
                    return false;
                }
                
                // 验证密码
                if (!/^\d{6}$/.test(password)) {
                    errorMessage.textContent = '密码必须是6位数字';
                    return false;
                }
            } else {
                // 管理员验证
                if (username.trim() === '') {
                    errorMessage.textContent = '请输入管理员账号';
                    return false;
                }
                
                if (password.length < 6) {
                    errorMessage.textContent = '密码长度不能少于6位';
                    return false;
                }
            }
            
            // 登录成功，显示相应仪表盘
            document.getElementById('login-page').classList.add('hidden');
            
            if (currentRole === 'customer') {
                document.getElementById('customer-dashboard').classList.remove('hidden');
                showCustomerSection('overview');
            } else {
                document.getElementById('admin-dashboard').classList.remove('hidden');
                showAdminSection('dashboard');
            }
            
            return false;
        }
        
        // 忘记密码功能
        function forgotPassword() {
            if (currentRole === 'customer') {
                alert('请携带身份证到银行柜台办理密码重置');
            } else {
                alert('请联系系统管理员重置密码');
            }
        }
        
        // 客户部分切换
        function showCustomerSection(section) {
            // 更新导航菜单活动状态
            const navLinks = document.querySelectorAll('#customer-dashboard .nav-menu a');
            navLinks.forEach(link => {
                if (link.getAttribute('onclick').includes(section)) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
            
            // 显示对应部分
            const sections = document.querySelectorAll('#customer-dashboard .customer-section');
            sections.forEach(sec => {
                if (sec.id === `customer-${section}`) {
                    sec.classList.remove('hidden');
                } else {
                    sec.classList.add('hidden');
                }
            });
        }
        
        // 管理员部分切换
        function showAdminSection(section) {
            // 更新导航菜单活动状态
            const navLinks = document.querySelectorAll('#admin-dashboard .nav-menu a');
            navLinks.forEach(link => {
                if (link.getAttribute('onclick').includes(section)) {
                    link.classList.add('active');
                } else {
                    link.classList.remove('active');
                }
            });
            
            // 显示对应部分
            const sections = document.querySelectorAll('#admin-dashboard .admin-section');
            sections.forEach(sec => {
                if (sec.id === `admin-${section}-section` || sec.id === `admin-${section}`) {
                    sec.classList.remove('hidden');
                } else {
                    sec.classList.add('hidden');
                }
            });
        }
        
        // 退出登录
        function logout() {
            if(confirm('确定要退出登录吗?')) {
                // 隐藏所有仪表盘，显示登录页面
                document.getElementById('customer-dashboard').classList.add('hidden');
                document.getElementById('admin-dashboard').classList.add('hidden');
                document.getElementById('login-page').classList.remove('hidden');
                
                // 清空表单
                document.getElementById('username').value = '';
                document.getElementById('password').value = '';
                document.getElementById('errorMessage').textContent = '';
            }
        }
        
        // 客户功能
        function customerDeposit() {
            const amount = document.getElementById('deposit-amount').value;
            const account = document.getElementById('deposit-account').value;
            
            if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
                document.getElementById('deposit-message').textContent = '请输入有效的存款金额';
                document.getElementById('deposit-message').className = 'error-message';
                return;
            }
            
            // 模拟存款成功
            document.getElementById('deposit-message').textContent = `成功向账户 ${account} 存入 ¥${amount}`;
            document.getElementById('deposit-message').className = 'success-message';
            document.getElementById('deposit-amount').value = '';
        }
        
        function customerWithdraw() {
            const amount = document.getElementById('withdraw-amount').value;
            const account = document.getElementById('withdraw-account').value;
            const password = document.getElementById('withdraw-password').value;
            
            if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
                document.getElementById('withdraw-message').textContent = '请输入有效的取款金额';
                return;
            }
            
            if (!password || password.length !== 6 || !/^\d+$/.test(password)) {
                document.getElementById('withdraw-message').textContent = '请输入6位数字密码';
                return;
            }
            
            // 模拟取款成功
            document.getElementById('withdraw-message').textContent = `成功从账户 ${account} 取出 ¥${amount}`;
            document.getElementById('withdraw-message').className = 'success-message';
            document.getElementById('withdraw-amount').value = '';
            document.getElementById('withdraw-password').value = '';
        }
        
        function customerTransfer() {
            const fromAccount = document.getElementById('transfer-from').value;
            const toAccount = document.getElementById('transfer-to').value;
            const amount = document.getElementById('transfer-amount').value;
            const password = document.getElementById('transfer-password').value;
            
            if (!toAccount || !/^10103576\d{8}$/.test(toAccount)) {
                document.getElementById('transfer-message').textContent = '请输入有效的对方账户卡号';
                return;
            }
            
            if (!amount || isNaN(amount) || parseFloat(amount) <= 0) {
                document.getElementById('transfer-message').textContent = '请输入有效的转账金额';
                return;
            }
            
            if (!password || password.length !== 6 || !/^\d+$/.test(password)) {
                document.getElementById('transfer-message').textContent = '请输入6位数字密码';
                return;
            }
            
            // 模拟转账成功
            document.getElementById('transfer-message').textContent = `成功从账户 ${fromAccount} 向 ${toAccount} 转账 ¥${amount}`;
            document.getElementById('transfer-message').className = 'success-message';
            document.getElementById('transfer-to').value = '';
            document.getElementById('transfer-amount').value = '';
            document.getElementById('transfer-password').value = '';
        }
        
        function searchRecords() {
            const keyword = document.getElementById('record-search').value;
            alert(`搜索交易记录: ${keyword}`);
            // 实际应用中这里会调用API搜索记录
        }
        
        function filterRecords() {
            const startDate = document.getElementById('record-start-date').value;
            const endDate = document.getElementById('record-end-date').value;
            const type = document.getElementById('record-type').value;
            
            alert(`筛选交易记录: ${startDate} 至 ${endDate}, 类型: ${type}`);
            // 实际应用中这里会调用API筛选记录
        }
        
        function exportRecordsToCSV() {
            alert('导出交易记录为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
        
        function prevRecordsPage() {
            alert('上一页交易记录');
        }
        
        function nextRecordsPage() {
            alert('下一页交易记录');
        }
        
        function changePassword() {
            const currentPwd = document.getElementById('current-password').value;
            const newPwd = document.getElementById('new-password').value;
            const confirmPwd = document.getElementById('confirm-password').value;
            
            if (!currentPwd || currentPwd.length !== 6 || !/^\d+$/.test(currentPwd)) {
                document.getElementById('password-message').textContent = '请输入6位数字当前密码';
                return;
            }
            
            if (!newPwd || newPwd.length !== 6 || !/^\d+$/.test(newPwd)) {
                document.getElementById('password-message').textContent = '请输入6位数字新密码';
                return;
            }
            
            if (newPwd !== confirmPwd) {
                document.getElementById('password-message').textContent = '两次输入的新密码不一致';
                return;
            }
            
            // 模拟修改密码成功
            document.getElementById('password-message').textContent = '密码修改成功';
            document.getElementById('password-message').className = 'success-message';
            document.getElementById('current-password').value = '';
            document.getElementById('new-password').value = '';
            document.getElementById('confirm-password').value = '';
        }
        
        function reportCardLoss() {
            const card = document.getElementById('report-card').value;
            const reason = document.getElementById('report-reason').value;
            
            // 模拟挂失成功
            document.getElementById('report-message').textContent = `卡号 ${card} 已成功挂失，原因: ${reason === 'lost' ? '卡片遗失' : reason === 'stolen' ? '卡片被盗' : '卡片损坏'}`;
            document.getElementById('report-message').className = 'success-message';
        }
        
        // 管理员功能
        function showAddCustomerForm() {
            document.getElementById('add-customer-form').classList.remove('hidden');
        }
        
        function cancelAddCustomer() {
            document.getElementById('add-customer-form').classList.add('hidden');
            document.getElementById('add-customer-message').textContent = '';
        }
        
        function addCustomer() {
            const name = document.getElementById('new-customer-name').value;
            const pid = document.getElementById('new-customer-pid').value;
            const phone = document.getElementById('new-customer-phone').value;
            const address = document.getElementById('new-customer-address').value;
            
            if (!name) {
                document.getElementById('add-customer-message').textContent = '请输入客户姓名';
                return;
            }
            
            if (!pid || !/^[0-9Xx]{18}$/.test(pid)) {
                document.getElementById('add-customer-message').textContent = '请输入有效的18位身份证号';
                return;
            }
            
            if (!phone || !/^1[0-9]{10}$/.test(phone)) {
                document.getElementById('add-customer-message').textContent = '请输入有效的11位手机号';
                return;
            }
            
            // 模拟添加客户成功
            document.getElementById('add-customer-message').textContent = `客户 ${name} 添加成功`;
            document.getElementById('add-customer-message').className = 'success-message';
            
            // 添加到表格
            const customersList = document.getElementById('customers-list');
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>C10003</td>
                <td>${name}</td>
                <td>${pid.substring(0, 3)}***************</td>
                <td>${phone.substring(0, 3)}****${phone.substring(7)}</td>
                <td>${address || '-'}</td>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="editCustomer('C10003')">编辑</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteCustomer('C10003')">删除</button>
                </td>
            `;
            customersList.appendChild(newRow);
            
            // 清空表单
            document.getElementById('new-customer-name').value = '';
            document.getElementById('new-customer-pid').value = '';
            document.getElementById('new-customer-phone').value = '';
            document.getElementById('new-customer-address').value = '';
        }
        
        function editCustomer(customerId) {
            alert(`编辑客户: ${customerId}`);
            // 实际应用中这里会弹出编辑表单
        }
        
        function deleteCustomer(customerId) {
            if (confirm(`确定要删除客户 ${customerId} 吗?`)) {
                alert(`客户 ${customerId} 已删除`);
                // 实际应用中这里会从表格中移除该行
            }
        }
        
        function searchCustomers() {
            const keyword = document.getElementById('customer-search').value;
            alert(`搜索客户: ${keyword}`);
            // 实际应用中这里会调用API搜索客户
        }
        
        function exportCustomersToCSV() {
            alert('导出客户数据为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
        
        function prevCustomersPage() {
            alert('上一页客户数据');
        }
        
        function nextCustomersPage() {
            alert('下一页客户数据');
        }
        
        function showAddCardForm() {
            document.getElementById('add-card-form').classList.remove('hidden');
        }
        
        function cancelAddCard() {
            document.getElementById('add-card-form').classList.add('hidden');
            document.getElementById('add-card-message').textContent = '';
        }
        
        function addCard() {
            const customerId = document.getElementById('new-card-customer').value;
            const depositType = document.getElementById('new-card-type').value;
            const amount = document.getElementById('new-card-amount').value;
            const currency = document.getElementById('new-card-currency').value;
            
            if (!customerId || !/^C\d+$/.test(customerId)) {
                document.getElementById('add-card-message').textContent = '请输入有效的客户ID';
                return;
            }
            
            if (!amount || isNaN(amount) || parseFloat(amount) < 1) {
                document.getElementById('add-card-message').textContent = '开户金额不能小于1元';
                return;
            }
            
            // 模拟添加银行卡成功
            document.getElementById('add-card-message').textContent = `为客户 ${customerId} 添加银行卡成功`;
            document.getElementById('add-card-message').className = 'success-message';
            
            // 生成随机卡号
            const cardNumber = '10103576' + Math.floor(10000000 + Math.random() * 90000000);
            
            // 添加到表格
            const cardsList = document.getElementById('cards-list');
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${cardNumber}</td>
                <td>${customerId}</td>
                <td>${customerId === 'C10001' ? '张三' : customerId === 'C10002' ? '李四' : '新客户'}</td>
                <td>${depositType === '1' ? '活期' : depositType === '2' ? '定活两便' : depositType === '3' ? '整存整取' : '零存整取'}</td>
                <td>¥${parseFloat(amount).toFixed(2)}</td>
                <td>正常</td>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="editCard('${cardNumber}')">编辑</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteCard('${cardNumber}')">删除</button>
                </td>
            `;
            cardsList.appendChild(newRow);
            
            // 清空表单
            document.getElementById('new-card-customer').value = '';
            document.getElementById('new-card-amount').value = '';
        }
        
        function editCard(cardNumber) {
            alert(`编辑银行卡: ${cardNumber}`);
            // 实际应用中这里会弹出编辑表单
        }
        
        function deleteCard(cardNumber) {
            if (confirm(`确定要删除银行卡 ${cardNumber} 吗?`)) {
                alert(`银行卡 ${cardNumber} 已删除`);
                // 实际应用中这里会从表格中移除该行
            }
        }
        
        function searchCards() {
            const keyword = document.getElementById('card-search').value;
            alert(`搜索银行卡: ${keyword}`);
            // 实际应用中这里会调用API搜索银行卡
        }
        
        function exportCardsToCSV() {
            alert('导出银行卡数据为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
        
        function prevCardsPage() {
            alert('上一页银行卡数据');
        }
        
        function nextCardsPage() {
            alert('下一页银行卡数据');
        }
        
        function showAddDepositForm() {
            document.getElementById('add-deposit-form').classList.remove('hidden');
        }
        
        function cancelAddDeposit() {
            document.getElementById('add-deposit-form').classList.add('hidden');
            document.getElementById('add-deposit-message').textContent = '';
        }
        
        function addDeposit() {
            const name = document.getElementById('new-deposit-name').value;
            const id = document.getElementById('new-deposit-id').value;
            const desc = document.getElementById('new-deposit-desc').value;
            
            if (!name) {
                document.getElementById('add-deposit-message').textContent = '请输入业务名称';
                return;
            }
            
            if (!id || !/^\d+$/.test(id)) {
                document.getElementById('add-deposit-message').textContent = '请输入有效的业务编号';
                return;
            }
            
            // 模拟添加存款业务成功
            document.getElementById('add-deposit-message').textContent = `存款业务 ${name} 添加成功`;
            document.getElementById('add-deposit-message').className = 'success-message';
            
            // 添加到表格
            const depositsList = document.getElementById('deposits-list');
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>${id}</td>
                <td>${name}</td>
                <td>${desc}</td>
                <td>
                    <button class="btn btn-primary btn-sm" onclick="editDeposit('${id}')">编辑</button>
                    <button class="btn btn-danger btn-sm" onclick="deleteDeposit('${id}')">删除</button>
                </td>
            `;
            depositsList.appendChild(newRow);
            
            // 清空表单
            document.getElementById('new-deposit-name').value = '';
            document.getElementById('new-deposit-id').value = '';
            document.getElementById('new-deposit-desc').value = '';
        }
        
        function editDeposit(depositId) {
            alert(`编辑存款业务: ${depositId}`);
            // 实际应用中这里会弹出编辑表单
        }
        
        function deleteDeposit(depositId) {
            if (confirm(`确定要删除存款业务 ${depositId} 吗?`)) {
                alert(`存款业务 ${depositId} 已删除`);
                // 实际应用中这里会从表格中移除该行
            }
        }
        
        function searchDeposits() {
            const keyword = document.getElementById('deposit-search').value;
            alert(`搜索存款业务: ${keyword}`);
            // 实际应用中这里会调用API搜索存款业务
        }
        
        function exportDepositsToCSV() {
            alert('导出存款业务数据为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
        
        function prevDepositsPage() {
            alert('上一页存款业务数据');
        }
        
        function nextDepositsPage() {
            alert('下一页存款业务数据');
        }
        
        function searchTransactions() {
            const keyword = document.getElementById('transaction-search').value;
            alert(`搜索交易: ${keyword}`);
            // 实际应用中这里会调用API搜索交易
        }
        
        function filterTransactions() {
            const startDate = document.getElementById('transaction-start-date').value;
            const endDate = document.getElementById('transaction-end-date').value;
            const type = document.getElementById('transaction-type').value;
            
            alert(`筛选交易: ${startDate} 至 ${endDate}, 类型: ${type}`);
            // 实际应用中这里会调用API筛选交易
        }
        
        function exportTransactionsToCSV() {
            alert('导出交易数据为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
        
        function deleteTransaction(transactionId) {
            if (confirm(`确定要删除交易 ${transactionId} 吗?`)) {
                alert(`交易 ${transactionId} 已删除`);
                // 实际应用中这里会从表格中移除该行
            }
        }
        
        function prevTransactionsPage() {
            alert('上一页交易数据');
        }
        
        function nextTransactionsPage() {
            alert('下一页交易数据');
        }
        
        function exportDashboardData() {
            alert('导出控制面板数据为CSV文件');
            // 实际应用中这里会生成CSV文件并下载
        }
    </script>
</body>
</html>